<template>
  <div class="width">
    <div class="width" v-if="type === 1">
      <a-input :placeholder="placeholder" :value="value" @change="change" />
    </div>
    <div class="width" v-if="type === 2">
      <a-select :value="value" @change="selectChange" :placeholder="placeholder">
        <a-select-option v-for="(item, index) in options" :key="index" :value="item[optionValue]">
          {{ item[optionLabel] }}
        </a-select-option>
      </a-select>
    </div>
    <div class="width" v-if="type === 3">
      <a-date-picker :placeholder="placeholder" class="width" :value="value" @change="dateChange" type="date" />
    </div>

    <div class="width" v-if="type === 4">
      <a-range-picker class="width" :value="rangeDateValue" @change="dateRangeChange" />
    </div>
    <div class="width" v-if="type === 5">
      <a-input-number
        :placeholder="placeholder"
        class="width"
        :min="min"
        :max="max"
        :value="value"
        @change="numberInputChange"
      />
    </div>
    <div class="width" v-if="type === 6">
      <a-checkbox-group :value="checkBoxValue" @change="checkBoxChange">
        <a-checkbox v-for="(item, index) in options" :key="index" :value="item.value">
          {{ item.label }}
        </a-checkbox>
      </a-checkbox-group>
    </div>

    <div class="width" v-if="type === 7">
      <a-cascader
        :options="options"
        :value="value"
        :changeOnSelect="changeOnSelect"
        :placeholder="placeholder"
        @change="cascaderChange"
        :fieldNames="fieldNames"
      />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  components: {},
  props: {
    placeholder: {
      type: String,
      default: '请输入'
    },
    type: {
      type: Number,
      default: 1
    },
    options: {
      type: Array,
      default: () => []
    },
    optionLabel: {
      type: String,
      default: 'label'
    },
    optionValue: {
      type: String,
      default: 'value'
    },
    fieldNames: {
      type: Object,
      default: () => ({ label: 'label', value: 'value', children: 'children' })
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    min: {
      type: Number,
      default: -Infinity
    },
    max: {
      type: Number,
      default: Infinity
    },
    changeOnSelect: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      value: undefined,
      rangeDateValue: [],
      checkBoxValue: [],
      Options: []
    }
  },
  created () {
    if (this.options && this.options.length) {
      this.Options = this.options
    }
  },
  watch: {
    options () {
      if (this.options && this.options.length) {
        this.Options = this.options
      }
    }
  },
  methods: {
    // 输入框值改变
    change (e) {
      this.value = e.target.value
      this.$emit('change', e.target.value)
    },
    // 选择器值改变
    selectChange (e) {
      this.value = e
      this.$emit('change', e)
    },
    // 日期选择器值改变
    dateChange (e) {
      this.value = e
      this.$emit('change', moment(e).format(this.format))
    },
    // 双日期选择器值改变
    dateRangeChange (e) {
      this.rangeDateValue = e
      this.$emit('change', [moment(e[0]).format(this.format), moment(e[1]).format(this.format)])
    },
    // 数字输入框值改变
    numberInputChange (e) {
      this.value = e
      this.$emit('change', e)
    },
    // 多选框值改变
    checkBoxChange (e) {
      this.checkBoxValue = e
      this.$emit('change', e)
    },
    // 级联选择器值改变
    cascaderChange (e) {
      this.value = e
      this.$emit('change', e)
    },
    // 清空
    clear () {
      this.value = undefined
      this.rangeDateValue = []
      this.checkBoxValue = []
      this.$emit('change', '')
    }
  }
}
</script>

<style lang="less" scoped>
.width {
  width: 100%;
}
</style>
